<!-- 取镜处收货 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查找</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
      <el-button type="primary" @click="shopReceipt" :loading="isReceipt">取镜收货</el-button>
    </el-button-group>
      <el-form inline label-width="100px" @keyup.enter.native="searchHandle">
        <el-form-item label="配镜单号">
          <el-input v-model="dataForm.billId" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="顾客姓名">
          <el-input v-model="dataForm.customerName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="配镜类型" prop="saleType">
          <el-select v-model="dataForm.saleType" placeholder="配镜类型" clearable>
            <el-option v-for="item in saleTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight" @selection-change="selectionChangeHandle">
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column prop="billId" label="配镜单号">
            <template slot-scope="scope">
              <el-button type="text" @click="checkDetailByOrder(scope.row.billId)">{{scope.row.billId}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="customerName" label="顾客姓名"> </el-table-column>
          <el-table-column prop="takeMirroDeptName" label="取镜门店">
          </el-table-column>
          <el-table-column prop="takeMirroTime" label="取镜时间"></el-table-column>
          <el-table-column prop="saleType" label="配镜类型">
            <template slot-scope="scope">
              <!-- 1-隐形订做,2-框镜订做,3-隐形成品,4-框镜成品,5-辅料-->
              {{getSaleType(scope.row.saleType)}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button v-if="permissions.eims_sale_glassreceipt" type="text" icon="el-icon-edit" @click="receiptHandle(scope.row.id)" v-prevent-re-click>收货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
      <order-info v-if="infoVisible" ref="infoDialog"></order-info>
  </div>
</template>

<script>
  import { getSaleGlassReceiptPage, putSaleGlassReceiptObj } from '@/api/eims/optician/shopReceipt'
  import OrderInfo from '@/views/eims/optician/glassesinfo/detail'
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  export default {
    data() {
      return {
        dataForm: {
          idList: []
        },
        isReceipt: false,
        visible: false,
        dataList: [],
        searchShow: true,
        infoVisible: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        selectionList: [],
        saleTypeData: [],
        saleTypeOptions: [
          { value: '1', label: '隐形订做' },
          { value: '2', label: '框镜订做' },
          { value: '3', label: '隐形成品' },
          { value: '4', label: '框镜成品' },
          { value: '5', label: '辅料' }
        ],
      }
    },
    components: {
        OrderInfo
    },
    created() {
      remote('sale_type').then(result => {
        this.saleTypeData = result.data.data
      })
      this.getDataList()
    },
    computed: {
      ...mapGetters(['permissions', 'bizData','userInfo']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        let params = {
          current: this.pageIndex,
          size: this.pageSize
        }
        this.dataListLoading = true
        this.dataForm.deptId = this.userInfo.lessDeptId
        getSaleGlassReceiptPage(Object.assign(params, this.dataForm)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
        //  查看配镜单详情
        checkDetailByOrder(order) {
            this.infoVisible = true;
            this.$nextTick(() => {
                this.$refs.infoDialog.init('', order, '配镜单详情');
            });
        },
      //获取配镜类型枚举
      getSaleType: function(value) {
        let obj = {};
        obj = this.saleTypeData.find((item) => {
          return item.value == value;
        });
        return obj.label;
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 收货
      receiptHandle(id) {
        this.$confirm('是否确认收货', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          let list = []
          list.push(id)
          let orderList = {
            'idList': list
          }
          return putSaleGlassReceiptObj(orderList)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success("收货成功")
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 搜索清空
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
        this.$refs.searchForm.resetFields();
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      // 多选表格change事件
      selectionChangeHandle(val) {
        this.selectionList = val
      },
      //弹框,确认批量收货
      shopReceipt() {
        let that = this
        this.isReceipt = true
        if (this.selectionList.length) {
          this.$confirm('是否确认批量收货', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            let list = []
            that.selectionList.forEach(item => {
              list.push(item.id)
            })
            let orderList = {
              'idList': list
            }
            putSaleGlassReceiptObj(orderList).then(response => {
              if(response.data.code == '0'){
                that.$message.success("批量收货成功")
                that.getDataList()
              }else{
                this.$message.error(response.data.msg)
              }
              that.isReceipt = false
            }).catch(() => {
              that.isReceipt = false
            })
          }).catch(() => {
            that.isReceipt = false
          })
        } else {
          this.isReceipt = false
          this.$message.warning('请选择配镜单')
        }
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page)
      }
    }
  }
</script>
